<script setup lang="ts">
  import { NMenu, NIcon, NNotificationProvider, NMessageProvider, NSpace } from 'naive-ui';
  import { RouterLink } from 'vue-router';
  import {
    HomeOutline as HomeIcon,
    ListOutline as StatusIcon,
    BookOutline as ProblemIcon,
    CodeSlashOutline as ContestIcon,
    MedalOutline as RankIcon,
    InformationCircleOutline as InfoIcon,
  } from '@vicons/ionicons5'

  import LoginReg from '@/components/LoginReg.vue'

  function renderIcon(icon: any){
    return () => h(NIcon, null, {default: () => h(icon)})
  }

  const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {to: {path: '/'}},
        { default: () => '首页' }
      ),
    key: 'index',
    icon: renderIcon(HomeIcon)
  },
  {
    label: () =>
      h(
        RouterLink,
        {to: {path: '/questions'}},
        { default: () => '题目' }
      ),
    key: 'questions',
    icon: renderIcon(ProblemIcon)
  },
  {
    label: () =>
      h(
        RouterLink,{to: {path: '/contests'}},
        { default: () => '竞赛' }
      ),
    key: 'contests',
    icon: renderIcon(ContestIcon)
  },
  {
    label: () =>
      h(
        RouterLink,
        {to: {path: '/status'}},
        { default: () => '状态' }
      ),
    key: 'status',
    icon: renderIcon(StatusIcon)
  },
  {label: () => h(
      RouterLink,
      {to: {path: '/rank'}},
      { default: () => '排名' }
    ),
    key: 'rank',
    icon: renderIcon(RankIcon)
  },
  {
    label: () => h(
      'a',
      {href: 'https://gitee.com/Whitroom/mini-judge'},
      { default: () => '关于' }
    ),
    key: 'about',
    icon: renderIcon(InfoIcon)
  }
]
</script>

<template>
  <n-notification-provider>
  <n-message-provider>
    <n-space justify="space-between" align="center" style="margin-top: 2px;">
      <n-menu mode="horizontal" :options="menuOptions"></n-menu>
      <login-reg />
    </n-space>
    <router-view/>
  </n-message-provider>
  </n-notification-provider>
</template>

<script lang="ts">
import {defineComponent, h} from 'vue'

export default defineComponent({
  data(){
    return {}
  },
})
</script>